<template>
  <div class="roleManage">
    <div class="leftList">
      <p class="title">角色列表</p>
      <div class="searchCon">
        <div class="search">
          <el-input
            v-model="roleName"
            placeholder="请输入角色名称"
            size="mini"
            clearable
          />
          <i class="el-icon-search" />
        </div>
        <div
          class="plusCon"
          @click="showUpdate('add')"
        > <i class="el-icon-circle-plus-outline" /></div>

      </div>
      <div class="roleList">
        <ul>
          <li
            v-for="item of showRoleList"
            :key="item.phid"
            :class="{ active: selectRoleId === item.phid, disabled: !item.enabledmark }"
            @click.stop="handleSelectRole(item.phid, item.enabledmark)"
          >
            <img
              style="width:25px;vertical-align: middle;float:left;margin-top: 3px;"
              src="@/assets/images/1.png"
              alt=""
            >
            <el-tooltip
              :content="item.name"
              placement="bottom"
            >
              <span>{{ item.name }}</span>
            </el-tooltip>

            <i
              class="el-icon-delete"
              @click="confirmDelete(item)"
            />
            <i
              class="el-icon-edit"
              @click="showUpdate('update',item)"
            />
          </li>
        </ul>
      </div>
    </div>
    <div class="rightList">
      <div class="title">
        <div class="allcheckCon">
          <!-- <el-checkbox
            v-model="allCheck"
            @change="allCheckChange"
          >全选</el-checkbox> -->
        </div>
        功能权限选择
      </div>
      <div class="ruleListCon">
        <auth-tree
          v-if="selectRoleId"
          ref="authTree"
          :role-id="selectRoleId"
        />
        <p class="btnCon">
          <!-- <span style="float:left;line-height:30px">
            注：当角色对应的功能勾选发生改变时，显示“取消”按钮，取消则将改动取消，回到原来的位置。
          </span> -->
          <!-- <button
            v-show="cancleBtn"
            class="greenBtn"
            @click="cancle"
          >取消</button> -->
          <button
            class="greenBtn"
            @click="handleUpdateAuthorize"
          >保存</button>
        </p>
      </div>
    </div>
    <el-dialog
      v-if="updateShow"
      :visible.sync="updateShow"
      :close-on-click-modal="false"
      :title="updateType==='add'?'新增角色':'修改角色'"
      append-to-body
      width="520px"
      custom-class="registrationDtlClass addroleCss"
    >
      <add-role
        :type="updateType"
        :info="updateInfo"
        @close="updateRoleClose"
      />

    </el-dialog>
  </div>
</template>

<script>
import addRole from './addRole'
import authTree from '@/components/auth-tree/index.vue'
import {
  getRoleAdd,
  getRoleEdit,
  getRoleList,
  getRoleDelete,
  updateRoleRule
} from '@/api/role/index'

export default {
  name: 'RoleManage',
  components: {
    addRole,
    'auth-tree': authTree
  },
  data() {
    return {
      roleName: '', // 用户名
      allCheck: false, // 全选
      roleList: [], // 角色列表
      updateShow: false,
      updateType: 'add',
      selectRoleId: null
      // cancleBtn: false,
    }
  },
  computed: {
    showRoleList() {
      return this.roleList
        .filter(role => role.name.includes(this.roleName))
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await this.handleGetRoleList()
      const getEnabledmarkList = this.roleList.filter(v => v.enabledmark)
      if (getEnabledmarkList.length) {
        this.selectRoleId = getEnabledmarkList[0].phid
      }
    },
    handleSelectRole(phid, enabledmark) {
      if (!enabledmark) return
      this.selectRoleId = phid
    },
    handleUpdateAuthorize() {
      const permIds = this.$refs.authTree.$refs.authTree.getCheckedNodes(false, true).map(node => node.phid)
      updateRoleRule({
        permIds,
        roleId: this.selectRoleId
      }).then(res => {
        this.$msgBox.show(res.message)
      }).catch(err => {
        this.$msgBox.error(err.message)
      })
    },
    confirmDelete(data) {
      this.$confirm('角色已有用户对应，删除将影响用户操作使用，确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRole(data)
      }).catch(err => { console.error(err) })
    },
    // 删除角色
    deleteRole(data) {
      console.log('delete', data)
      getRoleDelete([data.phid]).then(res => {
        console.log('getRoleDelete', res)
        if (res.status) {
          this.$msgBox.show('角色' + data.name + '已成功删除!')
          this.handleGetRoleList()
        } else {
          this.$msgBox.error(res.message)
        }
      }).catch(err => {
        console.log(err)
        this.$msgBox.error('删除失败!')
      })
    },
    // 显示新增修改
    showUpdate(str, info) {
      this.updateType = str
      if (str === 'add') {
        this.updateInfo = {}
      } else {
        this.updateInfo = JSON.parse(JSON.stringify(info))
      }
      this.updateShow = true
    },
    // 完成新增/修改
    updateRoleClose(data) {
      if (!data) {
        this.updateShow = false
        return
      }
      const func = this.updateType === 'add' ? getRoleAdd : getRoleEdit
      func(data).then(res => {
        if (res.status) {
          this.$msgBox.show(this.updateType === 'add' ? ('角色' + data.name + '添加成功!') : '角色信息修改成功')
          this.updateShow = false
          this.handleGetRoleList()
        } else {
          this.$msgBox.error(res.message)
          this.updateShow = false
        }
      }).catch(err => {
        console.log(err)
        this.$msgBox.error('保存失败!')
      })
    },

    // 获取角色列表
    async handleGetRoleList() {
      try {
        const { data } = await getRoleList()
        this.roleList = data
      } catch (err) {
        this.$msgBox.error('获取角色权限失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.roleManage {
  height: 100%;
  padding: 20px;
  overflow: hidden;
  padding-left: 340px;
  min-width: 1250px;
  > div {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .leftList {
    width: 300px;
    margin-left: -320px;
    float: left;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 3px 5px #ccc;
  }
  .title {
    height: 40px;
    line-height: 40px;
    background: $btn_blue;
    color: #fff;
    position: relative;
    font-size: 0.19rem;
    text-align: center;
  }
  .searchCon {
    height: 36px;
    line-height: 36px;
    text-align: left;
    padding-left: 10px;
    .search {
      float: left;
      width: 90%;
      height: 30px;
      margin-top: 3px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    i {
      font-size: 20px;
    }
    .el-icon-search {
      color: $btn_blue;
      width: 10%;
      float: right;
      line-height: 30px;
      text-align: center;
      // cursor: pointer;
    }
    .el-icon-circle-plus-outline {
      color: $green;
    }
  }
  .plusCon {
    width: 10%;
    float: left;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
  }
  .searchCon >>> .el-input {
    width: 90%;
    height: 100%;
    .el-input__inner {
      border: 0;
      vertical-align: super;
    }
  }
  .roleList {
    height: 100%;
    padding: 5px 10px 80px;
    > ul {
      border-top: 1px solid $borderGray;
      padding: 5px;
      padding-top: 10px;
      overflow: auto;
      > li {
        line-height: 30px;
        height: 30px;
        cursor: pointer;
        > span {
          float: left;
          width: 180px;
          text-align: left;
          margin: 0 5px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        > i {
          float: right;
          font-size: 20px;
          height: 100%;
          line-height: 30px;
          margin-left: 5px;
          color: #666;
          cursor: pointer;
        }
        &:hover,
        &.active {
          background: rgba(39, 143, 239, 0.2);
          border-radius: 5px;
        }
        &.disabled {
          background: #ccc;
          cursor: not-allowed;
        }
      }
    }
  }
}
.allcheckCon {
  position: absolute;
  left: 10px;
  top: 9px;
  height: 100%;
  line-height: 1;
  >>> .el-checkbox__label {
    color: #fff;
  }
}
.rightList {
  position: relative;
}
.rightList > .title {
  border-radius: 5px;
}
.ruleListCon {
  padding: 20px 10px;
  height: 100%;
  padding-bottom: 70px;
  position: relative;
  > p {
    text-align: right;
    button {
      margin-right: 40px;
    }
  }
}
.rules {
  margin-bottom: 20px;
  >>> .el-checkbox__label {
    color: $btn_blue;
    font-size: 0.17rem;
  }
  ul {
    padding: 10px 0 0 100px;
    overflow: hidden;
    position: relative;
    > li {
      margin-right: 30px;
      &:first-of-type {
        position: absolute;
        left: 0;
        width: 90px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.btnCon {
  position: absolute;
  bottom: 40px;
  right: 30px;
}
</style>
<style lang="scss">
@import "@/styles/variables.scss";
.addroleCss {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 3px #ccc;
  .el-dialog__header {
    background: $green;
    .el-dialog__title {
      color: #fff;
    }
  }
}
</style>
